
// nav.html导航栏上面的猜你喜欢，浏览记录，喜欢列表 的电影渲染
movie_show(user_5_brow,"user_5_brow");
movie_show(user_5_like,"user_5_like");
movie_show(user_5_cai,"user_5_cai");

// nav.html导航栏上面的四个栏目的电影渲染
movie_show(movie_nav_tag[0]["data"],"movie_nav_tag_1");
movie_show(movie_nav_tag[1]["data"],"movie_nav_tag_2");
movie_show(movie_nav_tag[2]["data"],"movie_nav_tag_3");
movie_show(movie_nav_tag[3]["data"],"movie_nav_tag_4");

// 当用户点击喜欢电影图片右下角的喜欢按钮时的触发
// movie_like类在movie_show函数中的html渲染时加上的
$(".movie_like").click(function () {
    // 目的旨在拿到存在于元素中的movieId属性值，而下面的th拿到一组元素是为了改变所有该电影的红心样式
    var movieId = this.getAttribute("movieId");
     // 使用 jQuery 选择器，选择所有具有属性 "movieId" 
     // 且属性值为当前获取到的 `movieId` 值的元素，并将选择结果存储在变量 `th` 中
    var th = $("[movieId="+movieId+"]");
    /* this 是单个触发点击事件的元素，而 th 是根据条件选择出来的一组具有特定属性值的元素。
    它们所代表的元素集合和具体元素是不同的。 */
    $.ajax({
        "url": "/movie/movie_like",
        "data": {"movieId":movieId},
        "type": "GET",
        "dataType": "json",
        "success": function (data) {
            if (data.code == 200) {
                show_tip(data.data.msg, "", 2);
                // movie_like_cs那个红心的样式类，toggleClass方法做到没就添加，有就移除
                th.toggleClass('movie_like_cs');
            } else {
                show_tip(data.msg, "", 2);
            }
            console.log(data);
        },
    });
})

/* 当页面加载完成后，实现一个页面滚动时的置顶按钮功能：
当页面滚动距离超过 100 像素时显示置顶按钮，点击该按钮后使
页面平滑滚动回顶部，滚动动画的时长根据计算得出。 */
window.onload=function(){

        /**置顶功能**/
	showScroll();
	function showScroll(){
		$(window).scroll( function() {
		    scrollValue=$(window).scrollTop();
            // 如果滚动距离大于 100 像素，使具有 `id="btn_top"` 的 `div` 元素淡入显示
            // 如果滚动距离小于或等于 100 像素，使具有 `id="btn_top"` 的 `div` 元素淡出隐藏  
            // fadeIn() 是 jQuery 提供的一个动画方法，用于使匹配的元素淡入显示。
			scrollValue > 100 ? $('div[id=btn_top]').fadeIn():$('div[id=btn_top]').fadeOut();
		} );
		$('#btn_top').click(function(){
			var value=scrollValue/8;
// 			console.log(Math.round(value));
            // 使用 jQuery 的 `animate` 方法，使页面平滑滚动到顶部（滚动距离为 0）
            // 滚动动画的持续时间为 `Math.round(value)` 毫秒，四舍五入为最接近的整数
			$("html,body").animate({scrollTop:0},Math.round(value));
		});
	}

}

